<script setup>
import { computed } from 'vue'
import CardLink from './CardLink.vue'

const props = defineProps({
  as: String,
  href: String
})

const component = computed(() => props.as || 'h2')
</script>

<template>
  <component :is="component" class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
    <CardLink v-if="href" :href="href">
      <slot />
    </CardLink>
    <slot v-else />
  </component>
</template>

<script>
export default {
  name: 'CardTitle',
  components: { CardLink }
}
</script>
